<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flex讲解</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta content="telephone=no" name="format-detection">
	<link rel="stylesheet" href="css/demo.css">
	<link rel="stylesheet" href="http://at.alicdn.com/t/font_1464432429_9014297.css">
</head>
<body>
<div class="dropMenu-box" id="dropMenuBox">
	<div class="bg"></div>
	<div class="dropMenu"></div>
</div>
<div class="all-all-wrap" id="allBox">
<div class="sider">
	
</div>
<div class="allWrap ub ub-ver">
	

<div class="header">
	<div class="header-row ub align-items-center">
         <div class="h1 ub-f1">
             <div class="head-box " id="headBox">
                <img src="img/head.jpg" alt="">
            </div>
          </div>
		
        <div class="h2 ub-f1">
             <div class="text ">
                动态
            </div>
          </div>
          <div class="h1 ub">
             <div class="more" id="moreBtn">
                更多
            </div>
          </div>
       
      
		
	</div>
</div>
<div class="ub-f1 main">
	<div class="content ub ub-ac">
        <div class="menu-btn ub-f1"><i class="iconfont icon-kongjian" style="color:#face00;"></i><span class="text">动态</span></div>
        <div class="menu-btn ub-f1"><i class="iconfont icon-fujin" style="color:#dd6d6c;"></i><span class="text">附近</span></div>
        <div class="menu-btn ub-f1"><i class="iconfont icon-zhangpeng" style="color:#fed700;"></i><span class="text">兴趣部落</span></div>
    </div>
    <div class="hr"></div>
    
    
	<div class="item-row ub align-items-center">
		<div class="head-box">
			<i class="iconfont icon-youxi" style="color:#00b1ea;"></i>
		</div>
        
		<div class="item-right flex1">
			<div class="top ub">
				<h6 class="user-name flex1">游戏</h6>
				<span class="time"><i class="iconfont icon-jiantou"></i></span>
			</div>

		</div>
	</div>
    <div class="item-row ub align-items-center">
		<div class="head-box">
			<i class="iconfont icon-gouwu" style="color:#ee614d;"></i>
		</div>
        
		<div class="item-right flex1">
			<div class="top ub">
				<h6 class="user-name flex1">购物</h6>
				<span class="time"><i class="iconfont icon-jiantou"></i></span>
			</div>

		</div>
	</div>
    <div class="item-row ub align-items-center">
		<div class="head-box">
			<i class="iconfont icon-yinle" style="color:#36bf7b;"></i>
		</div>
        
		<div class="item-right flex1">
			<div class="top ub">
				<h6 class="user-name flex1">音乐</h6>
				<span class="time"><i class="iconfont icon-jiantou"></i></span>
			</div>

		</div>
	</div>
    <div class="item-row ub align-items-center">
		<div class="head-box">
			<i class="iconfont icon-luxiang" style="color:#f54f77;"></i>
		</div>
        
		<div class="item-right flex1">
			<div class="top ub">
				<h6 class="user-name flex1">直播</h6>
				<span class="time"><i class="iconfont icon-jiantou"></i></span>
			</div>

		</div>
	</div>
    <div class="item-row ub align-items-center">
		<div class="head-box">
			<i class="iconfont icon-icyingyongbao48px" style="color:#00aef1;"></i>
		</div>
        
		<div class="item-right flex1">
			<div class="top ub">
				<h6 class="user-name flex1">应用宝</h6>
				<span class="time"><i class="iconfont icon-jiantou"></i></span>
			</div>

		</div>
	</div>
    
    <div class="hr1"></div>
    <div class="item-row ub align-items-center">
		<div class="head-box">
			<i class="iconfont icon-lianxiren" style="color:#00aef1;"></i>
		</div>
        
		<div class="item-right flex1">
			<div class="top ub">
				<h6 class="user-name flex1">附近的群</h6>
				<span class="time"><i class="iconfont icon-jiantou"></i></span>
			</div>

		</div>
	</div>
    <div class="item-row ub align-items-center">
		<div class="head-box">
			<i class="iconfont icon-chichihehe" style="color:#fa8746;"></i>
		</div>
        
		<div class="item-right flex1">
			<div class="top ub">
				<h6 class="user-name flex1">吃喝玩乐</h6>
				<span class="time"><i class="iconfont icon-jiantou"></i></span>
			</div>

		</div>
	</div>
    <div class="item-row ub align-items-center">
		<div class="head-box">
			<i class="iconfont icon-fujin" style="color:#dd6d6c;"></i>
		</div>
        
		<div class="item-right flex1">
			<div class="top ub">
				<h6 class="user-name flex1">同城服务</h6>
				<span class="time"><i class="iconfont icon-jiantou"></i></span>
			</div>

		</div>
	</div>
</div>
<div class="footer ub ub-ac">
	<div class="menu-btn active ub-f1"><i class="iconfont icon-xiaoxi"></i><span class="text">消息</span></div>
	<div class="menu-btn ub-f1"><i class="iconfont icon-lianxiren"></i><span class="text">联系人</span></div>
	<div class="menu-btn ub-f1"><i class="iconfont icon-star"></i><span class="text">动态</span></div>
</div>
</div>	
	</div>
	<script src="js/jquery.js"></script>
	<script src="js/sider.js"></script>
	<script >
	$(function(){
		$('#allBox').sider();	
		$('#dropMenuBox').sider({
			headBox:'#moreBtn'
		});
	})
		
	
		
	</script>
</body>
</html>